<template>
  <el-dialog
    ref="ref-dialog"
    :visible.sync="visible"
    :title="title"
    v-bind="dialogProps"
    v-on="dialogEvents"
  >
    <el-button-group class="flagbar">
      <tg-button-status
        :active.sync="refreshFlag"
        :button-c-m="refreshButtonCM"
      />
    </el-button-group>
    <tg-control-bar
      v-if="hasControlBar"
      class="control-bar"
      :left-items="controlBarLeftItems"
      :right-items="controlBarRightItems"
    />
    <tg-form-basic-dialog
      ref="ref-searcher"
      :title="searcherTitle"
      :hold-height="searcherHoldHeight"
      :form="searcher"
      :control-bar="searcherControlBar"
      @input="handleSearcherInput($event)"
    />
    <el-table-package
      ref="ref-table"
      :c-m="tableCM"
      :loading="tableLoading"
    />
    <el-pagination-package
      v-show="showPagination"
      class="pagination"
      :total="total"
      :page.sync="page"
      :limit.sync="limit"
      @size-change="doSearch($event)"
      @current-change="loadData($event)"
    />
  </el-dialog>
</template>

<script lang="ts">
/*
prop 列表 [参考 TgTable]
  title: string             标题
  dialogCM: ComponentModel  对话框组件模型
ref 列表 [参考 TgTable]
  ref-dialog
*/
import { Component, Prop } from 'vue-property-decorator'
import TgTable from './TgTable'
import { ComponentModel } from '@TG/interface'
import { appModule } from '@TG/store/modules/app'
import ElPaginationPackage from '../ElPackage/ElPaginationPackage.vue'
import ElTablePackage from '../ElPackage/ElTablePackage.vue'
import TgButtonStatus from '../TgButton/TgButtonStatus.vue'
import TgControlBar from '../TgControlBar/index.vue'
import TgFormBasicDialog from '../TgForm/TgFormBasicDialog.vue'

@Component({
  name: 'TgTableBasicDialog',
  components: {
    ElPaginationPackage,
    ElTablePackage,
    TgButtonStatus,
    TgControlBar,
    TgFormBasicDialog
  }
})
export default class extends TgTable {
  @Prop({ type: String, default: '' }) protected title!: string
  @Prop({ type: Object }) private dialogCM!: ComponentModel

  private visible: boolean = false
  private refreshFlag: boolean = true

  get dialogProps() {
    return Object.assign({ fullscreen: true }, this.dialogCM?.props
    )
  }

  get dialogEvents() {
    return Object.assign({ closed: () => this.handleClosed() }, this.dialogCM?.events)
  }

  get refreshButtonCM(): ComponentModel {
    return {
      props: new Map<string, any>([
        ['icon', 'el-icon-antd-sync']
      ]),
      meta: { tip: '关闭时向父窗口返回刷新指令' }
    }
  }

  public showDialog() {
    this.visible = true
  }

  public hideDialog() {
    this.visible = false
  }

  private handleClosed() {
    // this.model = this.getModel()
    this.$emit('hide-after', {
      refreshFlag: this.refreshFlag
    })
  }

  protected adjustHeight(height: number) {
    let maxHeight: number = height
    if (maxHeight === -1) {
      maxHeight = appModule.pageSize.height
      maxHeight -= 54 // header 54
    }
    maxHeight -= 40 // bodypadding 40
    maxHeight -= 56 // flagbar 36 + 20
    return maxHeight
  }
}
</script>

<style lang="scss" scoped>
::v-deep {
  .el-dialog__body {
    padding-top: 10px;
  }
}

.flagbar {
  padding-left: 11px;
  padding-bottom: 20px;
}

.control-bar {
  margin-bottom: 1px;
}

.pagination {
  margin-top: 1px;
  border: 1px solid #dfe6ec;
}
</style>
